{% load staticfiles %}
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
        /* CLIENT-SPECIFIC STYLES */
        #outlook a {
            padding: 0;
        }

        /* Force Outlook to provide a "view in browser" message */
        .ReadMsgBody {
            width: 100%;
        }

        .ExternalClass {
            width: 100%;
        }

        /* Force Hotmail to display emails at full width */
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
            line-height: 100%;
        }

        /* Force Hotmail to display normal line spacing */
        body, table, td, a {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        /* Prevent WebKit and Windows mobile changing default text sizes */
        table, td {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        /* Remove spacing between tables in Outlook 2007 and up */
        img {
            -ms-interpolation-mode: bicubic;
        }

        /* Allow smoother rendering of resized image in Internet Explorer */

        /* RESET STYLES */
        body {
            margin: 0;
            padding: 0;
        }

        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
        }

        table {
            border-collapse: collapse !important;
        }

        body {
            height: 100% !important;
            margin: 0;
            padding: 0;
            width: 100% !important;
        }

        /* iOS BLUE LINKS */
        .appleBody a {
            color: #68440a;
            text-decoration: none;
        }

        .appleFooter a {
            color: #999999;
            text-decoration: none;
        }

        /* MOBILE STYLES */
        @media screen and (max-width: 525px) {

            /* ADJUSTS LAYOUT OF LOGO IMAGE */
            td[class="logo"] {
                text-align: left;
                padding: 20px 0 20px 0 !important;
            }

            td[class="logo"] img {
                margin: 0 auto !important;
            }

            /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
            td[class="mobile-hide"] {
                display: none;
            }

            img[class="mobile-hide"] {
                display: none !important;
            }

            img[class="img-max"] {
                max-width: 100% !important;
                height: auto !important;
            }

            /* FULL-WIDTH TABLES */
            table[class="responsive-table"] {
                width: 100% !important;
            }

            /* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
            td[class="padding"] {
                padding: 10px 5% 15px 5% !important;
            }

            td[class="padding-copy"] {
                padding: 10px 5% 10px 5% !important;
                text-align: center;
            }

            td[class="padding-meta"] {
                padding: 30px 5% 0px 5% !important;
                text-align: center;
            }

            td[class="no-pad"] {
                padding: 0 0 20px 0 !important;
            }

            td[class="no-padding"] {
                padding: 0 !important;
            }

            td[class="section-padding"] {
                padding: 50px 15px 50px 15px !important;
            }

            td[class="section-header"] {
                padding: 10px 15px 10px 15px !important;
            }

            td[class="section-padding-bottom-image"] {
                padding: 50px 15px 0 15px !important;
            }
        }
    </style>
    {% if not email_mode %}
        {% include "partials/google-analytics.html" %}
    {% endif %}
</head>
<body bgcolor="#FFFFFF" text="#000000">
<title>{{ page_title }}</title>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
        <td style="padding: 20px 15px 20px 15px;"
            class="section-header" align="center" bgcolor="#ffffff"
            width="100%">
            <!-- HIDDEN PREHEADER TEXT -->
            <div style="display: none; font-size: 1px; color: #fefefe;
              line-height: 1px; font-family: Helvetica, Arial,
              sans-serif; max-height: 0px; max-width: 0px; opacity: 0;
              overflow: hidden;">{{ preheader_text }}
            </div>
            {% block header_image %}
            <table class="responsive-table" align="center" border="0" width="500"
                   cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <td align="center">
                        <table border="0" width="100%" cellpadding="0"
                               cellspacing="0">
                            <tbody>
                            <tr>
                                <td align="center" bgcolor="#ffffff">
                                    {% with "save-the-date/images/"|add:header_filename as header_filepath %}
                                        <img src="{% if email_mode %}cid:{{ header_filename }}{% else %}{% static header_filepath %}{% endif %}"
                                             style="display: inline-block; align-content:center; font-size: 16px;"
                                             border="0"
                                             height="60" width="60">
                                    {% endwith %}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
            {% endblock %}
        </td>
    </tr>
    </tbody>
</table>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
        <td style="padding: 20px 15px 20px 15px;"
            class="section-padding" align="center" bgcolor="{{ main_color }}">
            <table class="responsive-table" border="0" width="500"
                   cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <td>
                        <table border="0" width="100%" cellpadding="0"
                               cellspacing="0">
                            <tbody>
                            {% block lead_copy %}{% endblock %}
                            <tr>
                                <td class="padding-copy">
                                    <table border="0" width="100%" cellpadding="0" cellspacing="0">
                                        <tbody>
                                        <tr>
                                            <td>
                                            {% block main_image %}{% endblock %}
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    {% block main_copy %}{% endblock %}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
        <td align="center" bgcolor="#ffffff">
            <table align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <td style="padding: 20px 0px;" align="center">
                        <table class="responsive-table" align="center" border="0" width="500" cellpadding="0" cellspacing="0">
                            <tbody>
                            <tr>
                                <td class="padding-copy"
                                    style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;"
                                    align="center">
                              <span class="appleFooter" style="color:#666666; align-content:center;">
                              {% block footer_content %}{% endblock %}
                              </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
<!--
  Based on a template courtesy of Litmus (@litmusapp)
-->
</body>
</html>
